<template>
    <div id="gdxq">
     <keep-alive>
          <!-- <component v-bind:is="this.$store.state.car>0?'Tow':'One'"></component> -->
          <!-- 要加引号包起来 -->
            <component v-bind:is="'Tow'"></component>
     </keep-alive>
      <div class="gdlb">
        <p>歌曲列表</p>
        <!--歌单列表 -->
        <div class="gdlb_box">
         <ul>
             <li v-for="(item,i) in list" :key="item.i"  @click="getgd(item.id)">
                 <span>{{i+1}}</span>
                 <div class="gd_right">
                   <div class="right_l">
                       <p>{{item.name}}</p>
                       <p>{{item.ar[0].name}}-{{item.name}}</p>
                   </div>
                   <div class="right_r">
                       <span>&#xe623;</span>
                   </div>
                 </div>
             </li>
         </ul>
        </div>
        <!-- 评论列表 -->
        <div class="pinglun">
          <p>精彩评论</p>
          <div class="pinglun_li">
             <ul>
                 <li v-for="item in pl" :key="item.id">
                     <div class="tu_l">
                         <img :src="item.user.avatarUrl" alt="">
                     </div>
                     <div class="tu_r">
                         <div class="r_t">
                             <div class="r_t_l">
                                 <p>{{item.user.nickname}}</p>
                                 <span>2017年03月03日</span>
                             </div>
                             <div class="r_t_r">
                                {{item.likedCount}} <span>&#xe602;</span>
                             </div>
                         </div>
                         <div class="r_b"><p>{{item.content}}</p></div>
                     </div>
                 </li>
             </ul>
          </div>
        </div>
      </div>
      <div class="bt">
          <p>收藏歌单</p>
      </div>
    </div>
</template>

<script>
import One from './Header/One.vue'
import Tow from './Header/Tow.vue'
export default {
    data(){
        return {
            list:[],
            id:this.$route.params.id,
            pl:[]
        }
    },
    created(){
        this.getlb()
        this.getpl()
    },
    methods:{
        getlb(){
           this.$axios.get('/playlist/detail?id='+this.id)
            .then(res=>{
                this.list= res.data.playlist.tracks
              
            })
        },
        getpl(){
            this.$axios.get("/comment/playlist?id="+this.id)
              .then(response=>{
                  console.log(response)
                  this.pl = response.data.comments
              })
        },
        getgd(ids){
            this.$router.push({name:'yinyue',params:{id:ids}})
        }
        
    },
    components:{
        One,
        Tow
    }
}
</script>

<style scoped>
.gdlb{
    width:100%;
    position: relative;
    padding-bottom: 60px;
}
.gdlb>p{
    padding:2px 4px;
    color:#7D7E7E;
    font-size:12px;
    display:block;
    background-color: #EEEFF0;
}
.gdlb_box>ul>li{
    display:flex;
    align-items: center;
}
.gdlb_box>ul>li>span{
    width:10%;
    text-align: center;
    line-height: 40px;
    color:#888888;
}
.gdlb_box>ul>li>.gd_right{
    border-bottom:1px solid #ddd;
    padding:10px 15px;
    display:flex;
    justify-content:space-between;
    width:90%;
}
.gd_right>.right_r>span{
   font-family: "wy";
   font-size: 20px;
   text-align: center;
   line-height: 40px;
   color:#888888;
}
.right_l>p:nth-child(1){
  color: black;
  margin-bottom: 8px;
}
.right_l>p:nth-child(2){
    color:#888888;
    font-size:12px;
}
.bt{
    width:100%;
    position: fixed;
    bottom: 0;
    z-index: 100;
    text-align: center;
    padding:10px 30px;
    background-color: white;
}
.bt>p{
    width:100%;
    height:40px;
    line-height: 40px;
    color:white;
    border-radius: 40px;
    text-align: center;
    background-color: #BF3A36;
}
.pinglun>p{
    width:100%;
    padding:3px 5px;
    display: block;
    color:#888888;
    font-size:12px;
    background-color: #EBEBEB;
}
.pinglun>.pinglun_li>ul>li{
    display:flex;

}
.pinglun>.pinglun_li>ul>li>.tu_l{
    width:15%;
    text-align: center;
}
.pinglun>.pinglun_li>ul>li>.tu_l>img{
    width:30px;
    height:30px;
    border-radius:50%;
    margin-top:15px;
}
.pinglun>.pinglun_li>ul>li>.tu_r{
    width:85%;
    border-bottom:1px solid #888888;
    padding:5px;
}
.pinglun>.pinglun_li>ul>li>.tu_r>.r_t{
   display:flex;
   justify-content:space-between;
   align-items: center;
}
.r_t_l>p{
    color:#888888;
    font-size:14px;
}
.r_t_l>span{
    color:#888888;
    font-size:8px;
}
.r_t_r{
    font-size:14px;
    color:#888888;
}
.r_t_r>span{
  color:#888888;
  font-size:15px;
  font-family: "wy";
}
.r_b>p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size:14px;
    color:#333333;
}
</style>